<template>
  <Overlay :visible="newUserGuideStep === 99">
    <div class="new_user_modal">
      <div class="content">
        <img
          class="welcome_img"
          src="https://imgs.nexbie.com/uploads/13cf7d3d5a7d4780bf7e6ca01a040bcc.webp"
          alt="" />
        <span class="text1 mt-[8px]">Welcome to Nexbie !</span>
        <span class="text2 mt-[8px]">Your Creative journey starts Now</span>
        <div class="img_list mt-[24px]">
          <div>
            <img
              class="good_img"
              src="https://imgs.nexbie.com/uploads/6c982a3963294aa99b3bb9d4dfcb58b0.webp"
              alt="" />
            <div class="mt-[8px]">Step one</div>
            <div>Create with AI</div>
          </div>
          <div>
            <img
              class="good_img"
              src="https://imgs.nexbie.com/uploads/ad3b447fb63a44a68f89961273fbd430.webp"
              alt="" />
            <div class="mt-[8px]">Step two</div>
            <div>Publish Design</div>
            <div>and Win support</div>
          </div>
          <div>
            <img
              class="good_img"
              src="https://imgs.nexbie.com/uploads/6ed9ac85948240399e95bca47b4626d8.webp"
              alt="" />
            <div class="mt-[8px]">Step three</div>
            <div>Earn Profit and</div>
            <div>Get your design in real life</div>
          </div>
        </div>
        <div class="btn_view">
          <div
            @click="goCreate"
            v-hover-bg="{
              enterColor: '#F9D9C7',
              leaveColor: '#fbe6db',
            }"
            class="btn1 mt-[24px] cursor-pointer">
            Create Now
          </div>
          <div @click="showUserGuide" v-hover-gradient class="btn mt-[24px] cursor-pointer">
            View Guideline
          </div>
        </div>
      </div>
      <!--      <div class="ml-[8px]">-->
      <!--        <CloseView @close="close" />-->
      <!--      </div>-->
    </div>
  </Overlay>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import { useUserStore } from '@/store/user';
  const router = useRouter();
  import Overlay from '@/components/Overlay.vue';
  import CloseView from '@/components/Close.vue';
  import { useRouter } from 'vue-router';
  const userStore = useUserStore();
  const newUserGuideStep = computed(() => userStore.newUserGuideStep);

  const goCreate = () => {
    userStore.setNewUserGuideStep(null);
    router.push('/generator');
  };

  const close = () => {
    userStore.setNewUserGuideStep(null);
  };

  const showUserGuide = () => {
    router.push('/');
    userStore.setNewUserGuideStep(1);
  };
</script>

<style scoped lang="scss">
  .new_user_modal {
    position: fixed;
    top: 50%; /* 距离视口顶部50% */
    left: 50%; /* 距离视口左侧50% */
    transform: translate(-50%, -50%); /* 向左、向上位移自身50%，抵消定位偏差 */
    z-index: 99;
    display: flex;
    flex-direction: row;
  }
  .content {
    padding: 24px 40px;
    background: #fff;
    width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
  }
  .btn_view {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  .btn {
    display: flex;
    width: 272px;
    padding: 13px 0;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(---, linear-gradient(90deg, #f76b1b 0%, #dc3a0e 100%));
    backdrop-filter: blur(2px);
    color: var(---0, #fff);
    font-family: 'Inter Tight';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    white-space: nowrap;
  }
  .btn1 {
    display: flex;
    width: 272px;
    padding: 13px 0;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(---hover, #f9d9c7);
    backdrop-filter: blur(2px);
    color: var(---, #f76b1b);
    font-family: 'Inter Tight';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    white-space: nowrap;
  }
  .img_list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    color: var(---9, #222);
    text-align: center;
    font-family: 'Inter Tight';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .welcome_img {
    width: 215px;
    height: 113px;
  }
  .good_img {
    border-radius: 8px;
    width: 160px;
    height: 160px;
  }
  .text1 {
    color: var(---9, #222);
    text-align: center;
    font-family: 'Inter Tight';
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
  .text2 {
    color: var(---6, #7a7a7a);
    text-align: center;
    font-family: 'Inter Tight';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
</style>
